<template>
  <div>
    <a-skeleton
      style="background: #fff; padding: 10px"
      v-if="listLoading"
      :active="true"
      :loading="listLoading"
    >
    </a-skeleton>
    <a-row
      v-for="(item, index) in listTitle"
      :key="index"
      class="bre-content-bg homeList-list-border"
    >
      <template v-if="item.imgSrc == ''">
        <a-col class="" :span="14">
          <router-link :to="{ name: 'article', params: { id: item.guid } }">
            <h3 class="text-overflow" v-text="item.title"></h3>
          </router-link>
        </a-col>
        <a-col style="text-align: right; font-size: 12px" :span="10">
          <span v-text="item.createdAt"></span>
        </a-col>
        <a-col :span="24">
          <span key="like-o" style="margin-right: 5px">
            <LikeOutlined /> :{{ item.actions.likeo }}
          </span>
          <span key="read-n" style="margin-right: 5px">
            <FireOutlined />:<span v-text="item.actions.readNum"></span>
          </span>
          <div>
            <a-tag
              style="margin-bottom: 4px"
              v-for="tagGroupitem in item.actions.tagGroup"
              :key="tagGroupitem"
              v-text="tagGroupitem"
            ></a-tag>
          </div>
        </a-col>
      </template>
      <template v-else>
        <a-col :span="18">
          <a-col>
            <div style="font-size: 12px" v-text="item.createdAt"></div>
          </a-col>
          <router-link :to="{ name: 'article', params: { id: item.guid } }">
            <a-row>
              <a-col :span="24">
                <h3 class="text-overflow" :title="item.title">
                  {{ item.title }}
                </h3>
              </a-col>
            </a-row>
            <a-row
              class="homeList-list-h"
              style="max-height: 40px; text-indent: 2em"
            >
              <a-col :span="24">
                <span style="color: #333" v-text="item.content"></span>
                <!-- <BreTextOverflowH style="font-size:1rem" :textValue="" :textLen="70"></BreTextOverflowH> -->
              </a-col>
            </a-row>
          </router-link>
          <!-- class="bre-text-overflow" -->
          <a-row>
            <a-col :span="24" class="bre-height100">
              <div class="bre-height100" style>
                <span key="like-o" style="margin-right: 5px">
                  <LikeOutlined />
                  <!-- <a-button style="padding: 0" type="link" size="small"> <LikeOutlined/> </a-button> -->
                  :{{ item.actions.likeo }}
                </span>
                <!-- <span key="message" style="margin-right: 5px;">  
                  <a-icon class="bre-margin-left" type="message" style="margin-right:8px" />
                 <CommentOutlined />:<span v-text="0"></span>
                </span>   -->
                <span key="read-n" style="margin-right: 5px">
                  <FireOutlined />:<span v-text="item.actions.readNum"></span>
                </span>
                <div>
                  <a-tag
                    style="margin-bottom: 4px"
                    v-for="tagGroupitem in item.actions.tagGroup"
                    :key="tagGroupitem"
                    v-text="tagGroupitem"
                  ></a-tag>
                </div>
                <!-- <span key="read-n">
                  <a-icon class="bre-margin-left" type="read" style="margin-right:8px" />
                   
                </span> -->
              </div>
            </a-col>
            <!-- <a-col :span="16" >
            <span v-text="item.createdAt" ></span>
            </a-col>-->
          </a-row>
        </a-col>
        <a-col
          :span="6"
          style="
            display: flex;
            align-items: center;
            overflow: hidden;
            max-height: 97px;
            width: 100%;
            align-items: center;
            border-radius: 5px;
          "
        >
          <a-image style="border-radius: 5px" :src="item.imgSrc" />
          <!-- <img :src="item.imgSrc"  style="width: 100%; align-items: center;border-radius: 4px;" alt /> -->
        </a-col>
      </template>
    </a-row>

    <a-pagination
      :pageSize="8"
      class="bre-margin-top"
      show-quick-jumper
      v-model:current="pageCurrentNum"
      :default-current="1"
      :total="totalCount"
      @change="onChange"
    />
    <br />
  </div>
</template>
<script>
import { GetListBaseInfo } from "@indexCore/api/article"; //文章列表
import { Timeago } from "@/utils/time"; //文章列表
import // onBeforeRouteUpdate
"vue-router";
import {
  //  CommentOutlined ,
  FireOutlined,
  LikeOutlined,
} from "@ant-design/icons-vue";
import {
  onUnmounted ,
  ref,
} from "vue";
import { useRouter } from "vue-router";
export default {
  name: "HomeList",

  components: {
    // CommentOutlined ,
    LikeOutlined,
    FireOutlined,
  },
  setup() {
    const $router = useRouter();
    let intiP = $router.currentRoute.value.query["p"] || 1;
    onChange(intiP);

    let listTitle = ref([]);
    let totalCount = ref(0);
    let listLoading = ref(true);
    let pageCurrentNum = ref( Number(intiP) );
    function onChange(pageNumber = 1) {
      pageNumber=Number(pageNumber)
      if (pageNumber > 1) {
        // $router.currentRoute.value.query["p"]= pageNumber
        $router.push({ query: { p: pageNumber } });
      } else {
        $router.push({ query: {} });
      }

      GetListBaseInfo({ currentPage: pageNumber })
        .then((res) => {
          if (res.data.length >= 0) {
            listTitle.value = res.data.map((item) => {
              return {
                guid: item.guid,
                createdAt: Timeago(item.createdAt), //new Date().toLocaleString()
                title: item.title,
                imgSrc:
                  item.coverImg && item.coverImg != " " ? item.coverImg : "",
                content: item.excerpt || "",
                actions: {
                  likeo: item.likeNumber || 0,
                  // reviewLen: item.reviewLen,
                  readNum: item.readCount || 0,
                  tagGroup: item.tagGroup ? item.tagGroup.split(",") : [],
                },
              };
            });
          }
          listLoading.value = false;
          totalCount.value = res.totalCount; //页面总数
        })
        .then(() => {
          // console.clear()
          pageCurrentNum.value =pageNumber 
        });
    }

    // window.onpopstate = () => {
    //   // 输入要返回的上一级路由地址
    //   console.log("1111111111111")
    // }

    function popstate() {
      // pageCurrentNum=ref($router.currentRoute.value.query["p"]|1)
      onChange( $router.currentRoute.value.query["p"])
    }
    window.addEventListener("popstate", function(){ popstate() }  );
    onUnmounted(() => {
     window.removeEventListener("popstate", function(){}, true);  
    }); 
    return {
      // onUpdated,
      listTitle,
      totalCount,
      listLoading,
      pageCurrentNum,
      onChange, 
    };
  },
};
</script>
<style >
.homeList-list-h {
  max-height: 40px;
}

.homeList-list-border {
  border-bottom: 1px solid #f0f2f7;
  padding: 10px;
}

.homeList-img-def {
  align-items: center;
  background-position-y: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.text-overflow {
  /* width:70px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>